import { Drawer, Button, Tabs, Descriptions } from 'antd';
import React, { useState } from 'react';
import { useRequest } from '@umijs/hooks';
import TreeControlled from '@/components/blocks/TreeControlled';
import styles from './Detail.less';
import { getResourceByRoleID, getUserByRoleID, aoSelectedRoleList } from '../service';
import AuthComponent from '@/components/Authorized/AuthComponent';
import { arrSortFun } from '@/utils/passengersSort';

const { TabPane } = Tabs;

const Detail = function Detail({ onClose, visible, current, onOption }) {
  const { id: roleId } = current;

  const [aoTreeData, setaoTreeData] = useState([]);
  const [resourceTree, setResourceTree] = useState([]);

  const { loading: resourceTreeLoading } = useRequest(
    () => getResourceByRoleID({ roleId }),
    {
      refreshDeps: [roleId],
      onSuccess(res){
        if (!res) return;
        let tempArr = [];
        for (const item of res) {
          if (item.children) {
            tempArr.push(item);
          }
        }
        setResourceTree(tempArr);
      }
    },
  );
  const { data: roleTree, loading: roleTreeLoading } = useRequest(
    () => getUserByRoleID({ roleId }),
    {
      refreshDeps: [roleId],
    },
  );
  const { loading: dataPermissionLoading } = useRequest(() => aoSelectedRoleList({ roleId }), {
    refreshDeps: [roleId],
    onSuccess(res) {
      if (res) {
        let arr = [], lastData = {};
        for (const item of res) {
          arr.push({
            title: item.permissionsRoleName,
            key: item.permissionsRoleId,
          })
        }
        lastData = {
          title: '辅营产品子平台',
          key: 'ao',
          children: arr
        }
        setaoTreeData([lastData])
      }

    },
  },
  );
  const renderRoleInfo = () => (
    <div className={styles.detail}>
      <Tabs>
        <TabPane tab="功能权限" key="1">
          <TreeControlled loading={resourceTreeLoading} data={resourceTree} />
        </TabPane>
        <TabPane tab='数据权限' key="3">
          <TreeControlled loading={dataPermissionLoading} data={aoTreeData} />
        </TabPane>
        <TabPane tab={`用户(${current.counts})`} key="2">
          <TreeControlled loading={roleTreeLoading} data={roleTree} />
        </TabPane>

      </Tabs>
    </div>
  );
  return (
    <Drawer
      title={false}
      placement="right"
      onClose={onClose}
      visible={visible}
      width={500}
      bodyStyle={{ paddingBottom: 80 }}
    >
      <Descriptions column={1}>
        <Descriptions.Item label="角色名称">{current.name}</Descriptions.Item>
        <Descriptions.Item label="角色描述">{current.description}</Descriptions.Item>
        <Descriptions.Item label="角色类型">{current.competenceName}</Descriptions.Item>
        <Descriptions.Item label="角色状态">{current.statusName}</Descriptions.Item>
        <Descriptions.Item label="创建人">{current.founder}</Descriptions.Item>
        <Descriptions.Item label="创建时间">{current.createTime}</Descriptions.Item>
        <Descriptions.Item label="最后修改人">{current.modifyPerson}</Descriptions.Item>
        <Descriptions.Item label="最后修改时间">{current.modifyTime}</Descriptions.Item>
      </Descriptions>
      {renderRoleInfo(current)}
      <div className={styles.drawerBottom}>
        <AuthComponent authCode="user.role.enable_disable">
          <Button onClick={() => onOption('changeState', current)} style={{ marginRight: 8 }}>
            {current.status === '1' ? '禁用' : '启用'}
          </Button>
        </AuthComponent>
        <AuthComponent authCode="user.role.edit_role">
          <Button onClick={() => onOption('edit', current, 1)} style={{ marginRight: 8 }}>
            修改功能权限
          </Button>
        </AuthComponent>
        <AuthComponent authCode="user.role.edit_user">
          <Button onClick={() => onOption('edit', current, 2)} type="primary">
            分配用户
          </Button>
        </AuthComponent>
      </div>
    </Drawer>
  );
};

export default Detail;
